<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发布</title>
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <style>
        html, body {
            background: #f7f7f7;
        }

        .weui-form {
            box-sizing: border-box;
            padding: 10px;
        }

        h3 {
            font-weight: 600;
            line-height: 60px;
        }

        .weui-cells {
            margin-top: 0;
        }

        .weui-input {
            text-align: right;
        }

        .weui-btn {
            background: -webkit-linear-gradient(left bottom, #72affb, #2392f9);
            background: -moz-linear-gradient(left bottom, #72affb, #2392f9);
            background: -ms-linear-gradient(left bottom, #72affb, #2392f9);
            background: -o-linear-gradient(left bottom, #72affb, #2392f9);
            margin-top: 30px;
        }

        .weui-picker-container {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .del {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
    </style>
</head>
<body ontouchstart>
<div id="adimssion">
    <form action="##" class="weui-form" @submit="checkForm">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea v-model="idea" class="weui-textarea" placeholder="分享这一刻你的想法..." rows="3"></textarea>
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd"></div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput2" class="weui-uploader__input js_file" type="file"
                                       accept="image/*"
                                       multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="weui-btn">发布</button>
    </form>

</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue2.5.16.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/file.js"></script>
<script>

    var app = new Vue({
        el: "#adimssion",
        data: {
            idea:""
        },
        mounted: function () {},
        methods: {
            checkForm: function (e) {
                if (!this.idea) {
                    $.toptip('请输入你的天马行空', 'warning');
                }
                e.preventDefault();
            },
        }
    })
</script>
</html>